<template>
  <div class="home-container">
    <!-- 时间和问候语区域 -->
    <div class="time-section">
      <h1 class="greeting">{{ greeting }}！</h1>
      <div class="time-display">{{ formatTime(currentTime) }}</div>
      <div class="date-display">{{ formatDate(currentTime) }}</div>
    </div>

    <!-- 快捷链接区域 -->
    <div class="quick-links-section">
      <h2>快捷链接</h2>
      <div class="links-grid">
        <div 
          v-for="link in quickLinks" 
          :key="link.name"
          class="link-card"
          @click="openLink(link.url)"
        >
          <div class="link-icon">{{ link.icon }}</div>
          <div class="link-name">{{ link.name }}</div>
        </div>
      </div>
    </div>

    <!-- 添加链接按钮 -->
    <div class="add-link-section">
      <button @click="showAddForm = !showAddForm" class="add-btn">
        {{ showAddForm ? '取消' : '➕ 添加链接' }}
      </button>
      
      <div v-if="showAddForm" class="add-form">
        <input 
          v-model="newLink.name" 
          placeholder="网站名称" 
          class="form-input"
        />
        <input 
          v-model="newLink.url" 
          placeholder="网站地址" 
          class="form-input"
        />
        <input 
          v-model="newLink.icon" 
          placeholder="图标 (emoji)" 
          class="form-input"
        />
        <button @click="addLink" class="save-btn">保存</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';

const currentTime = ref(new Date());
const greeting = ref('');
const showAddForm = ref(false);

// 新链接表单数据
const newLink = ref({
  name: '',
  url: '',
  icon: '🌐'
});

// 快捷链接（从 localStorage 加载）
const quickLinks = ref([
  { name: 'Google', url: 'https://www.google.com', icon: '🔍' },
  { name: 'GitHub', url: 'https://github.com', icon: '🐙' },
  { name: 'Stack Overflow', url: 'https://stackoverflow.com', icon: '📚' },
  { name: 'MDN', url: 'https://developer.mozilla.org', icon: '📖' }
]);

// 更新时间
const updateTime = () => {
  currentTime.value = new Date();
};

// 获取问候语
const getGreeting = () => {
  const hour = currentTime.value.getHours();
  if (hour < 12) {
    greeting.value = '早上好';
  } else if (hour < 18) {
    greeting.value = '下午好';
  } else {
    greeting.value = '晚上好';
  }
};

// 格式化时间
const formatTime = (date: Date) => {
  return date.toLocaleTimeString('zh-CN', {
    hour12: false,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });
};

// 格式化日期
const formatDate = (date: Date) => {
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  });
};

// 打开链接
const openLink = (url: string) => {
  window.open(url, '_blank');
};

// 添加新链接
const addLink = () => {
  if (newLink.value.name && newLink.value.url) {
    // 确保 URL 有协议前缀
    let url = newLink.value.url;
    if (!url.startsWith('http://') && !url.startsWith('https://')) {
      url = 'https://' + url;
    }
    
    quickLinks.value.push({
      name: newLink.value.name,
      url: url,
      icon: newLink.value.icon || '🌐'
    });
    
    // 保存到 localStorage
    localStorage.setItem('customLinks', JSON.stringify(quickLinks.value));
    
    // 重置表单
    newLink.value = { name: '', url: '', icon: '🌐' };
    showAddForm.value = false;
  }
};

// 从 localStorage 加载链接
const loadLinks = () => {
  const saved = localStorage.getItem('customLinks');
  if (saved) {
    quickLinks.value = JSON.parse(saved);
  }
};

let timeInterval: ReturnType<typeof setInterval>;

onMounted(() => {
  loadLinks();
  updateTime();
  getGreeting();
  // 每秒更新时间
  timeInterval = setInterval(() => {
    updateTime();
    getGreeting();
  }, 1000);
});

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval);
  }
});
</script>

<style scoped>
.home-container {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.time-section {
  text-align: center;
  margin-bottom: 3rem;
}

.greeting {
  font-size: 3rem;
  font-weight: 300;
  margin: 0 0 1rem 0;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  color: white;
}

.time-display {
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  color: white;
}

.date-display {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 2rem;
  color: white;
}

.quick-links-section {
  margin-bottom: 3rem;
  text-align: center;
}

.quick-links-section h2 {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  font-weight: 300;
  color: white;
}

.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.link-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 2rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.link-card:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.link-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.link-name {
  font-size: 1rem;
  font-weight: 500;
  color: white;
}

.add-link-section {
  text-align: center;
}

.add-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 12px 24px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
  font-weight: 500;
}

.add-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.add-form {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.form-input {
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 14px;
  backdrop-filter: blur(10px);
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.form-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.2);
}

.save-btn {
  background: rgba(76, 175, 80, 0.8);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
}

.save-btn:hover {
  background: rgba(76, 175, 80, 1);
  transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .greeting {
    font-size: 2rem;
  }
  
  .time-display {
    font-size: 2.5rem;
  }
  
  .links-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .home-container {
    padding: 1rem;
  }
  
  .links-grid {
    grid-template-columns: 1fr;
  }
}
</style> 